<template>
  <div class="login">
    <el-row>
      <el-button :icon="Search" circle />
      <el-button type="primary" :icon="Edit" circle />
      <el-button type="success" :icon="Check" circle />
      <el-button type="info" :icon="Message" circle />
      <el-button type="warning" :icon="Star" circle />
      <el-button type="danger" :icon="Delete" circle />
    </el-row>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <h1 class="title">题龙阳县青草湖</h1>
          <div class="sub-title">【作者】唐温如 【朝代】元</div>
        </div>
      </template>
      <div class="line">
        <el-tag effect="dark" type="success" size="large">
          <span class="txt">西风吹老洞庭波，</span>
        </el-tag>
        <el-tag effect="dark" type="" size="large">
          <span class="txt">一夜湘君白发多。</span>
        </el-tag>
      </div>
      <div class="line">
        <el-tag effect="dark" type="danger" size="large">
          <span class="txt">醉后不知天在水，</span>
        </el-tag>
        <el-tag effect="dark" type="warning" size="large">
          <span class="txt">满船清梦压星河。</span>
        </el-tag>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star
} from '@element-plus/icons-vue'

export default defineComponent({
  name: 'LoginView',
  setup() {
    return {
      Check,
      Delete,
      Edit,
      Message,
      Search,
      Star
    }
  }
})
</script>

<style lang="less">
.title,
.line {
  text-align: center;
}
.sub-title {
  font-size: 12px;
  text-align: center;
  color: rgb(126, 126, 126);
}
.line {
  width: 410px;
  margin: 0 auto;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  .txt {
    font-size: 22px;
  }
}
.box-card {
  width: 480px;
  margin: 0 auto;
}
</style>
